<template>
  <el-affix>
    <!--导航栏-->
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
    >
      <router-link to="/userIndex" style="text-decoration: none"><div class="logo">全景租房网</div></router-link>
      <el-menu-item index="2" @click="goUserMine">个人中心</el-menu-item>
      <el-menu-item index="1">我的收藏</el-menu-item>
    </el-menu>
    <div class="h-6"/>
  </el-affix>

  <div class="container my-4">
    <!-- 房源列表 -->
    <div class="row">
      <div class="col-md-4 mb-4" v-for="house in userListings" :key="house.id">
        <el-card shadow="always" class="house-card">
          <div style="  width: 480px; /* 固定宽度 */
            height: 220px; /* 固定高度 */
            object-fit: cover; /* 保持长宽比，裁剪多余部分 */">
            <img :src="house.pic" alt="house-image" class="img-fluid rounded mb-2" style="  width: 380px; /* 固定宽度 */
            height: 220px; /* 固定高度 */
            object-fit: cover; /* 保持长宽比，裁剪多余部分 */"/>
          </div>
          <h3>{{ house.title }}</h3>
          <p>价格: {{ house.rent }} 元/月</p>
          <p>地址: {{ house.address }}</p>
          <p class="text-truncate">描述: {{ house.houseDesc }}</p>
          <div class="d-flex justify-content-between mt-3">
            <el-button type="danger" size="small" @click="deleteListing(house.id)">取消收藏</el-button>
            <el-button type="success" size="small" @click="goPropertyDetails(house.id)">查看详情</el-button>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import router from "../router/router.ts";
import axios from "axios";

const userId = localStorage.getItem('userId')
const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const goUserMine = () => {
  router.push("/UserMine")
}

interface Listing {
  id: string;
  pic: string;
  title: string;
  price: number;
  address: string;
  houseDesc: string;
}

const userListings = ref<Listing[]>([])
const deleteListing = (id: number) => {
  console.log(`取消收藏: ${id}`);
  // 调用API取消收藏
  axios.delete(`/fangyuan/property/favorite/${userId}/${id}`).then(response => {
    if (response.data.code === 1) {
      // 删除成功，更新列表
      userListings.value = userListings.value.filter(listing => listing.id !== id);
    } else {
      console.error(`取消收藏失败: ${response.data.msg}`);
    }
  }).catch(error => {
    console.error(`取消收藏失败: ${error}`);
  })
}
const goPropertyDetails = (id: number) => {
  router.push({name: 'UserPropertyDetails', params: {id}});
  console.log(`查看详情: ${id}`);
}

// 获取用户收藏的房源列表
const fentchMyListings = async () => {
  try {
    // 调用API获取用户收藏的房源列表
    const response = await axios.get(`/fangyuan/property/favorite/${userId}`);
    if (response.data.code === 1) {
      // 更新userListings列表
      userListings.value = response.data.data;
    } else {
      console.error(`获取房源列表失败: ${response.data.msg}`);
    }
  } catch (error) {
    console.error(`获取房源列表失败: ${error}`);
  }
}

onMounted(async () => {
  await fentchMyListings()
})
</script>

<style scoped>
.logo {
  font-size: 24px;
  font-weight: bold;
  background-color: #409eff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  height: 60px;
  color: white;
}

.house-card {
  background-color: #f9f9f9;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.text-truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
